import React, { Component } from 'react'
import {Card, Table, Modal, Button, message} from 'antd';
import axios from './../../axios';
import utils from './../../utils/utils';
import './table.less';
class basicTable extends Component {
    state = {
        dataSource2: [],
        loading: false
    }
    params = {
        page: 1
    }
    componentDidMount() {
        const dataSource = [
            {
                id: '0',
                userName: 'jack',
                Sex: '1',
                State: '1',
                Hobby: '1',
                Birthday: '1994-04-14',
                Address: '河南省商丘市柘城县佰岗乡',
                Time: '07:20'
            },
            {
                id: '1',
                userName: 'Tom',
                Sex: '1',
                State: '1',
                Hobby: '1',
                Birthday: '1994-04-14',
                Address: '河南省商丘市',
                Time: '07:20'
            },
            {
                id: '3',
                userName: 'Lily',
                Sex: '1',
                State: '1',
                Hobby: '1',
                Birthday: '1994-04-14',
                Address: '河南省商丘市',
                Time: '07:20'
            }
        ]
        dataSource.map((item, index) => {
            return item.key = index;
        })
        this.request()
        this.setState({
            dataSource
        })
    }
    // 动态获取表格数据
    request = () => {
        this.setState({loading: true})
        let _this = this;
        axios.Ajax({
            url: '/table/list',
            method: 'get',
            data: {
                params: {
                    page: this.params.page
                },
                isShowLoading: false
            }
        }).then((res) => {
            res.result.list.map((item, index) => {
               return item.key = index;
            })
            this.setState({
                dataSource2: res.result.list,
                loading: false,
                pagination: utils.pagination(res, (current) => {
                    _this.params.page = current;
                    _this.request();
                }),
                // 获取数据时重置一下选中的数据
                selectedRowKeys: [],
                selectedRows: null
            })
        })
    }
    /**
     * 点击行
     * @param record 当前行的数据
     * @param index 当前索引值
     */
    onRowClick = (record, index) => {
        let selectKey = [index];
        Modal.info({
            title: '信息',
            content: `用户名是：${record.userName}`
        })
        this.setState({
            selectedRowKeys: selectKey,  // 选中项的索引值
            selectedItem: record         // 选中项的数据信息
        })
    }
    /**
     * 复选表格——删除
     */
    delete = () => {
        let rows = this.state.selectedRows;
        let ids = []; // 存储选中行的id值
        rows.map((item) => {
            return ids.push(item.id);
        })
        Modal.info({
            title: '删除',
            content: `你确定要删除这些数据吗？${ids.join(',')}`,
            onOk: () =>{
                message.success('删除成功');
                this.request();
            }
        })
    }
    render () {
        const columns = [
            {
                title: 'id',    // 表头
                dataIndex: 'id' // 字段属性名
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                dataIndex: 'Sex',
                render(Sex) {
                    return Sex === 0 ? '男': '女'
                }
            },
            {
                title: '状态',
                dataIndex: 'State',
                render(state) {
                    let config = {
                        '1' : '咸鱼一条',
                        '2' : '风华正茂',
                        '3' : '北大才子',
                        '4' : '百度F1',
                        '5' : '创业者',
                        '6' : '小白一枚'
                    }
                    return config[state]
                }
            },
            {
                title: '爱好',
                dataIndex: 'Hobby',
                render(hobby) {
                    let config = {
                        '1':'写字',
                        '2':'游泳',
                        '3':'跑步',
                        '4':'打篮球',
                        '5':'画画',
                        '6':'唱歌',
                        '7':'骑行',
                        '8':'麦霸',
                        '9':'桌球'
                    };
                    return config[hobby]
                }
            },
            {
                title: '生日',
                dataIndex: 'Birthday'
            },
            {
                title: '地址',
                dataIndex: 'Address'
            },
            {
                title: '早起时间',
                dataIndex: 'Time'
            },

        ];
        // 结构对象
        const {selectedRowKeys} = this.state
        const rowSelection = {
            type: 'radio',   // 单选
            selectedRowKeys  // 当前选中的key值
        }
        const rowCheckboxSelection = {
            type: 'checkbox', // 复选
            selectedRowKeys,
            // 选中项发生变化时的回调
            onChange: (selectedRowKeys, selectedRows) => {
                // let ids = [];
                // selectedRows.map((item) => {
                //    return ids.push(item.id)
                // })
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            }      
        }
        return (
            <div>
                <Card title="基础表格">
                    <Table dataSource={this.state.dataSource} columns={columns}/>
                </Card>
                <Card title="动态数据渲染表格">
                    <Table 
                        dataSource={this.state.dataSource2} 
                        columns={columns}
                        pagination={false}
                        loading={this.state.loading}/>
                </Card>
                <Card title="Mock-单选">
                    <Table 
                        rowSelection={rowSelection}
                        onRow={(record, index) => {
                            return {
                              onClick: () => {
                                  this.onRowClick(record, index)
                              },       // 点击行
                            };
                          }}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        loading={this.state.loading}/>
                </Card>
                <Card title="Mock-复选">
                    <div>
                        <Button onClick= {this.delete} style={{margin: 10}}>删除</Button>
                    </div>
                    <Table 
                        rowSelection={rowCheckboxSelection}
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        loading={this.state.loading}/>
                </Card>
                <Card title="表格-分页">
                    <Table 
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        loading={this.state.loading}
                        pagination={this.state.pagination}/>
                </Card>
            </div>
        )
    }
}

export default basicTable